<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/tab.css">
</head>

<body>
    <div id="app">
        <div class="container">
            <tabs-component></tabs-component>
        </div>
    </div>

    <!-- 定义选项卡模板 -->
    <template id="tabs-tpl">
        <div class="tabs">
            <tabs-nav-component :current-index.sync="currentIndex" :tabs-data="tabsData"></tabs-nav-component>
            <tabs-content-component :current-index="currentIndex"></tabs-content-component>
        </div>
    </template>

    <!-- 定义选项卡 - 导航 模板 -->
    <template id="tabs-nav-tpl">
        <div>
            <div class="tabs-nav">
                <div class="nav-way">
                    <div class="train" :style="{left: (currentIndex * 100) +'px'}"></div>
                </div>
                <ul>
                    <li v-for="(item , index) in tabsData" @mouseenter="changeCurrentIndex(index)">
                        <a href="javascript:void(0)">{{item}}</a>
                    </li>
                </ul>
            </div>
            <div class="tabs-way">
                <div class="train" :style="{left: (currentIndex * 100) +'px'}"></div>
            </div>
        </div>
    </template>

    <!-- 定义选项卡 - 内容模板 -->
    <template id="tabs-content-tpl">
        <div class="tabs-content">
            <!-- 使用keep-alive组件进行动态组件的缓存
                include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
                    根据组件中的name 属性来进行缓存 : 字符串 , 数组 :include="['ta','tb']" , 正则 :include="/^t\w/"

                exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
                    :exclude="/^t\w/"
                    
                max - 数字。最多可以缓存多少组件实例。 (默认预设10个)
                
            -->
            <keep-alive :max="10">
                <!-- 使用动态组件 来指定需要渲染的组件 使用is 属性来指定需要渲染的组件 (占位符) -->
                <component :is="comps[currentIndex]"></component>
            </keep-alive>
        </div>
    </template>



    <!-- 选项内容  - a 模板 -->
    <template id="tabs-item-a">
        <div class="item">
            首页
            <input type="text">
        </div>
    </template>

    <!-- 选项内容  - b 模板 -->
    <template id="tabs-item-b">
        <div class="item">天猫</div>
    </template>

    <!-- 选项内容  - c 模板 -->
    <template id="tabs-item-c">
        <div class="item">聚划算</div>
    </template>

    <!-- 选项内容  - d 模板 -->
    <template id="tabs-item-d">
        <div class="item">京东</div>
    </template>

    <!-- 选项内容  - e 模板 -->
    <template id="tabs-item-e">
        <div class="item">苏宁易购</div>
    </template>
    <script src="js/vue.js"></script>
    <script src="js/app.js"></script>
</body>

</html>